<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #title>
        <div style="color: #fff">地图找房</div></template
      ></van-nav-bar
    >
    <baidu-map :center="center" :zoom="zoom" class="bm-view" v-if="list.length">
      <my-overlay
        v-for="item in list"
        :key="item.value"
        :position="{ lng: item.coord.longitude, lat: item.coord.latitude }"
        :text="{ label: item.label, count: item.count }"
        :active="active"
        @mouseover.native="active = true"
        @mouseleave.native="active = false"
      ></my-overlay>
      <div v-if="list.length">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      </div>
    </baidu-map>
    <PageLoading v-else></PageLoading>
  </div>
</template>

<script>
import { listingInformation } from '@/api/article'
import MyOverlay from '@/components/public/MyOverlay.vue'
import PageLoading from '@/components/public/PageLoading.vue'

export default {
  name: 'mapFind-page',
  components: {
    MyOverlay,
    PageLoading
  },
  async created () {
    const { body } = await listingInformation(this.$store.state.user.value)
    if (body) {
      this.list = body
      this.center.lng = body[2].coord.longitude
      this.center.lat = body[2].coord.latitude
    }
  },
  data () {
    return {
      list: [],
      active: false,
      center: { lng: 116.404, lat: 39.915 },
      zoom: 12
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #15b572;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
.bm-view {
  width: 100%;
  height: 667px;
}
</style>
